<template>
    <div>
        <div class="det-coupon det-click" v-if="couponList" @click="clickCoupon">
            <div class="coupon-tit">领券</div>
            <div class="coupon-con">
                <span class="item" style="margin: 0 2px" v-for="(item, index) in couponList" :key="index">
                    满{{ item.fullPrice }}减{{ item.offPrice }}
                </span>
            </div>
            <div class="num">共{{ couponList.length }}张</div>
            <div class="more">...</div>
        </div>

        <!-- 领优惠券 -->
        <div class="popup-hide" :class="{ show: showCoupon }" @click.stop>
            <div class="popup-box">
                <div class="popup-tit">
                    <em class="tit">优惠券</em>
                    <i class="close close-pop" @click="closeAll"></i>
                </div>
                <div class="popup-con get-coupons">
                    <div class="get-coupons-tit">可领取优惠券</div>
                    <div class="list-item" v-for="(item, index) in couponList" :key="index">
                        <div class="left">
                            <div class="num flex-center">
                                ￥
                                <span class="price line-clamp1" style="width: auto; max-width: 100px">{{ item.offPrice }}</span>
                            </div>
                            <span class="condition">满{{ item.fullPrice }}元可用</span>
                        </div>
                        <div class="right">
                            <div class="des">
                                <i class="coupon-style">{{ item.couponType == 'product' ? '商品' : '店铺' }}</i>
                                {{ item.couponName }}
                            </div>
                            <div class="han">
                                <span class="use-time">
                                    {{ item.startDate | dateformat('YYYY-MM-DD') }} - {{ item.endDate | dateformat('YYYY-MM-DD') }}
                                </span>
                                <button class="get-btn" @click="getCoupon(item.couponId)">{{item.status | btnStatusFilter}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 领优惠券 -->
    </div>
</template>
<script>
import { receive } from 'api/coupon'
export default {
    props: {
        couponList: [Array, String]
    },
		filters: {
			btnStatusFilter(val) {
				if(val === null) {
					return '立即领取'
				}
				return {1: '立即领取', '-1': '已失效', 0: '已下新', 2: '已领取', 3: '已领取', 4: '已失效', 5: '已领完' }[val]
			}
		},
    data() {
        return {
            showCoupon: false
        }
    },
    methods: {
        clickCoupon() {
            this.showCoupon = true
        },
        closeAll() {
            this.showCoupon = false
        },
        //领取
        getCoupon(couponId) {
            this.$utils.uDebounce(() => {
				receive({ couponId: couponId }).then((res) => {
				    if (res.status == 1) {
				        if (res.msg == 'OK') {
				            this.$toast('领取成功')
													//领取成功， 让详情页重新获取最新数据刷新优惠券状态
													this.$emit('successReceive')
				        }
				    } else {
				        this.$toast(res.msg)
				    }
				})
			})
        }
    }
}
</script>
<style lang="stylus" scoped></style>
